 <%-- 客户管理 --%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.edatagrid.js"></script>
<script type="text/javascript" src="js/uploadPreview.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript" src="backadmin/ckeditor/ckeditor.js"></script>
<div class="easyui-layout" fit="true" style="height:100%;">
	<div data-options="region:'north'"  >
	    <input name="codition" id="ss" class="easyui-searchbox"
			searcher="searchgoods" prompt="请输入商品名"
			style="width:130px;vertical-align:middle;"></input>
    </div>
	<%-- 表格数据区域 --%>
	<div region="center" border="false">
		<table id="goodstable" ></table>
	</div>
</div>

<%--用于修改图片的对话框 --%>
<div id="pphotoDialog" class="easyui-dialog" title="商品图片" style="width: 650px; height: 500px;"  
                data-options="iconCls:'icon-edit',modal:true,collapsible:false,minimizable:false,maximizable:false,resizable:false,closed:true,closable:false">  
    <div style="margin-left: 5px;margin-right: 5px;margin-top: 5px;">           
		<form name="pphotoform" id="pphotoform">
			<input type="hidden" id="pid" name="pid" value=""/>
	        <table style="margin-top: 20px;margin-left:20px;margin-right:20px;vertical-align:middle;" width="80%" border="0" cellpadding="0" cellspacing="1">  
	            <tr>  
	                <td>  
	              		<div id="pphotodiv"><img id="pphoto" width="530" height="360" /></div>
	                </td>  
	            </tr> 
	            <tr>  
	                <td><input type="file" id="newpphoto" name="newpphoto" /></td>
	            </tr>
	        </table>  
        </form>
        <div style="text-align:right;margin-right:30px;">  
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="updatepphoto()">修改</a>  
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="cancel('pphotoDialog')">取消</a>  
        </div>                  
    </div>          
</div>  


<%--用于查看详情的对话框 --%>
<div id="detailDialog" class="easyui-dialog" title="商品详情" style="width: 650px; height: 500px;"  
                data-options="iconCls:'icon-edit',modal:true,collapsible:false,minimizable:false,maximizable:true,resizable:false,closed:true,closable:false">  
    <div style="margin-left: 5px;margin-right: 5px;margin-top: 5px;">           
		<form name="detailform" id="detailform">
			<input type="hidden" id="detailpid" name="detailpid" value=""/>
			<textarea class="ckeditor" name="detail"></textarea>
        </form>
        <div style="text-align:right;margin-right:30px;">  
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="updateDetail()">修改</a>  
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="cancel('detailDialog')">取消</a>  
        </div>                  
    </div>          
</div>  

<script type="text/javascript">
	//图片详情 弹出框的取消按钮
	function cancel(dialog){
		if(dialog=='detailDialog'){
			$("#pid").val("");
			$("#detailpid").val("");
			$("#pphoto").attr("src","");
			$("#newpphoto").val("");
			$("#pphotoDialog").window("close");
		}else{
			$("#pid").val("");
			$("#detailpid").val("");
			$("#pphoto").attr("src","");
			$("#newpphoto").val("");
			$("#detailDialog").window("close");
		}
		
	}
	//修改详情按钮
	function updateDetail(){
		$.ajax({
			url:'backadmin/goods.action',
			type:'POST',
			dataType:'JSON',
			data:{op:"updategoodsDetail",pid:$("#detailpid").val() , detail:CKEDITOR.instances.detail.getData() },//CKeditor提供的跨域传参的方法
			success:function(data){
				cancel('detailDialog');
				// 刷新 
				$("#goodstable").datagrid("reload");
			}
		});
	}
	
	//修改图片按钮
	function updatepphoto(){
		$.ajaxFileUpload({
			url:'backadmin/file.action',
			secureuri:false,//上传的时候是否使用安全协议https而不是使用http
			type:'POST',
			dataType:'json',
			fileElementId:'newpphoto',//上传的文件域的id
			data:{op:'goodspphotoupload',pid:$("#pid").val(),addrDir:'goods'},
			success:function(data){
				cancel("pphotoDialog");
				//刷新
				$("#goodstable").datagrid("reload");
			}
		});
		//为了解决不能显示图片的Bug TODO
		new uploadPreview({ UpBtn: "newpphoto", DivShow: "pphotodiv", ImgShow: "pphoto" });
	}
	
	//弹出图片 的方法
	function editpphoto(pid,pphoto){
		//如果有图片  就填充图片
		if(pphoto!="undefined"){
			// TODO	$("#pphoto").attr("src","images/goods/"+pphoto);
			$("#pphoto").attr("src","images/mixedPicData/"+pphoto);
		}
		//存放图片对应的goods ID,应该是用于ajax 用于修改数据库的图片信息
		$("#pid").attr("value",pid);
		//打开图片 对话框
		$("#pphotoDialog").window('open');
	}
	
	//弹出商品详情 的方法
	function editDetail(pid){
		//存放图片对应的goods ID
		$("#detailpid").attr("value",pid);
		//打开图片 对话框
		$("#detailDialog").window('open');
	}

	//查询商品的方法
	function searchgoods(value,name){
		$("#goodstable").edatagrid({
			url:"backadmin/goods.action?op=findGoods",
		    saveUrl: "backadmin/goods.action?op=addGoods",
		    updateUrl: "backadmin/goods.action?op=updateGoods",
		    idField:"pid",
			pagination:true,
			pageNumber:1,
			pageSize:10,
			pageList:[10,20,30,40,50],
			fit:true,
			rownumbers:true,
			sortName:"pid",
			title:"兑换商品信息列表",
			sortOrder:"desc",
			fitColumns:true,
			singleSelect:true,
			queryParams:{
				pname:value
			},
			columns:[[
				{field:"pid",title:"兑奖商品编号",width:100,align:"center"},
				{field:"pname",title:"兑奖商品名",width:100,align:"center",editor:'text'},
				{field:"pneed",title:"所需积分",width:100,align:"center",editor:'text'},
				{field:"pdiscount",title:"折扣",width:100,align:"center",editor:'text'},
				{field:"pphoto",title:"照片",width:180,align:"center",
					formatter:function(value,rec){
	        			return '<img class="editCls1" src="images/mixedPicData/'+value+'" width="160" height="90" href="javascript:void(0)"/>';
					}	
				},
				{field:"pstatus",title:'显示状态',width:100,align:"center",
					formatter:function(value,row,index){
						if(row.pstatus==1){
							var a='<input type="checkbox" class="ck" checked="true" pid='+row.pid+' value="1" />';
						}else{
							var a='<input type="checkbox" class="ck" pid='+row.pid+' value="0" />';
						}
						return a;
					}
				},
				{field:'opt',title:'操作',width:200,align:"center",
					formatter:function(value,row){
						var a='<a class="editcls1" onclick="editpphoto(\''+row.pid+'\',\''+row.pphoto+'\')" href="javascript:void(0)">商品图片</a>';
						var b='<a class="editcls2" onclick="editDetail(\''+row.pid+'\')" href="javascript:void(0)">商品详情</a>';
						return a+b;
					}
				},
				toolbar[
				         {
				        	 iconCls:'icon-add',
				        	 text:"添加",
				        	 handler:function(){
				        		 $("#goodstable").edatagrid('addRow');
				        	 }
				         },{
				        	 iconCls:'icon-save',
				        	 text:"保存",
				        	 handler:function(){
				        		 $("#goodstable").edatagrid('saveRow');//完成添加或更新
				        	 }
				         },{
				        	 iconCls:'icon-undo',
				        	 text:"取消编辑",
				        	 handler:function(){
				        		 $("#goodstable").edatagrid('cancelRow');
				        	 }
				  		  }
				  ]
			]],
			onLoadSuccess:function(data){
				linkbuttonAdjust();
				$("#goodstable").edatagrid("fitColumns");//修复不对齐的bug
				changeStatus();
			},
			onAftereditor:function(data){
				linkbuttonAdjust();
			},
			
		});
	}
	
	//上下架方法
	function changeStatus(){
		$(".ck").each(function(index, element) {
			if($(this).attr("isbind")!="true"){
				$(this).bind("click",function(){
					var pid=$(this).attr("pid") ;
					if($(this).val()==1){//下架操作
						changeStatusAjax(pid,0);
						$(this).val("0");
					}else{//上架操作
						changeStatusAjax(pid,1);
						$(this).val("1");
					}
					$(this).attr("isbind","true");//避免重复绑定
				});
			}
        });
	}
	//上下架方法向服务器发送数据
	function changeStatusAjax(pid,pstatus){//handle:1 表示上架   0表示下架
		var operate="显示";
		if(pstatus==0){
			operate="隐藏";
		}
		$.ajax({
			url:'backadmin/goods.action',
			type:'POST',
			data:{op:"changeStatus",pid:pid,pstatus:pstatus},
			success:function(data){
			}
		});
	}
	
	function linkbuttonAdjust(){
		$(".editcls1").linkbutton({text:"商品图片",plain:true,iconCls:'icon-edit'});
		$(".editcls2").linkbutton({text:"商品详情",plain:true,iconCls:'icon-edit'});
	}
	
	$(function(){
		searchgoods(null,null);
		new uploadPreview({ UpBtn: "newpphoto", DivShow: "pphotodiv", ImgShow: "pphoto" });
	});
</script>	     